<template>
  <div class="synchronous">
    <el-dialog title="分类同步" :visible.sync="open" width="800px" append-to-body :before-close="close">
      <!-- show-checkbox -->
      <el-tree
        v-loading="loading"
        :data="data"
        :props="defaultProps"
        node-key="id"
        accordion
        :expand-on-click-node="false"
        :default-checked-keys="checkBox"
        @node-click="handleNodeClick"
        @check-change="handleCheckChange"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span style="width: 100%;">{{ node.label }}
          </span>
          <span style="position: absolute;right: 0;">
            <el-button v-if="data.is_exist == true" type="text" size="mini">
              已同步
            </el-button>
            <el-button v-else type="text" size="mini" style="color: red;">
              未同步
            </el-button>
          </span>
        </span>
      </el-tree>
      <span slot="footer">
        <el-button type="primary" @click="synchronous()">一键同步</el-button>
        <el-button type="primary" @click="close()">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list } from '@/api/order'
import { getGoodsRemote, getGoodSync } from '@/api/product'

export default {
  name: 'Synchronous',
  props: {
    open: {
      type: Boolean
    }
  },
  data() {
    return {
      loading: true,
      data: [],
      page: 1,
      checkBox: [],
      defaultProps: {
        children: 'children',
        label: 'goods_name',
        disabled: 'is_exist'
      }
    }
  },
  watch: {
    open(val) {
      if (val) {
        this.data = []
        this.page = 1
        this.getList()
      }
    }
  },
  created() {
  },
  methods: {
    // 节点选中状态发生变化时的回调
    handleCheckChange(data, checked, indeterminate) {
      // 获取所有选中的节点 start
      const res = this.$refs.tree.getCheckedNodes()
      const arrDeptId = []
      res.forEach((item) => {
        arrDeptId.push(item.deptId)
      })
      console.log(arrDeptId)
      // 获取所有选中的节点 end
    },
    synchronous() {
      this.loading = true
      let lists = []
      this.data.forEach(item => {
        if (item.is_exist !== true) {
          lists.push(item)
        }
      })
      console.log(lists)
      getGoodSync({ lists: lists }).then(res => {
        if (res.code === 10000) {
          this.loading = false
          this.$message({
            message: '同步成功',
            type: 'success'
          })
          this.$emit('update:open', false)
        }
      })
    },
    handleNodeClick(data) {
    // console.log(this.$refs.tree.getCheckedKeys())
    },
    getList() {
      var that = this
      this.loading = true
      getGoodsRemote({ page: this.page }).then(res => {
        if (res.code === 10000) {
          this.data.push(...res.data)
          if (this.data.length < res.count) {
            this.page++
            this.getList()
          } else {
            that.data.forEach((item, Index) => {
              item.id = Index + 1
              if (item.is_exist !== true) {
                that.checkBox.push(Index + 1)
              }
            })
            // console.log(that.data)
            // console.log(that.checkBox)
            this.loading = false
          }
        }
      })
    },
    close() {
      this.$emit('update:open', false)
    }
  }
}
</script>
